<template>
  <a-modal
    class="noborder"
    :title="title"
    :width="520"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-tabs :activeKey="activeKey" @change="onChangeTabs">
          <a-tab-pane :key="RECHARGE_TYPE_BALANCE" tab="审核">
            <template v-if="activeKey === RECHARGE_TYPE_BALANCE">
              <a-form-item class="mb-5" label="经销商ID" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <span>{{ record.user_id }}</span>
              </a-form-item>
              <a-form-item class="mb-5" label="经销商账号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <span>{{ record.mobile}}</span>
              </a-form-item>
              <a-form-item style="margin-bottom:107px;" class="mb-5"  v-if="record.dealer_real_name!='平台'" label="付款凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <span>
                  <a title="点击查看原图" :href="record.pz_image" target="_blank">
                  <img :src="record.pz_image" alt="" style="width: 100%;">
                  </a>
                </span>
              </a-form-item>
              
              <a-form-item label="上级经销商" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="record.dealer_real_name!='平台'">
                <span>从上级{{record.dealer_real_mc}}为:{{record.dealer_real_name}}划账{{record.dealer_money}}元</span>
              </a-form-item>
              <a-form-item label="余额" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="record.dealer_real_name!='平台'">
                <span>余额增加{{record.dealer_money_yj}}元</span>
              </a-form-item>
              
              <a-form-item label="审核选项" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-radio-group
                  v-decorator="[`is_check`, { initialValue: '1', rules: [{ required: true }] }]"
                >
                  <a-radio value="1">同意</a-radio>
                  <a-radio value="-1">拒绝</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item label="审核备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-textarea
                  placeholder="请输入审核备注"
                  :rows="3"
                  v-decorator="[`remark`,{initialValue:record.remark}]"
                />
              </a-form-item>
            </template>
          </a-tab-pane>
        </a-tabs>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
// import pick from 'lodash.pick'
import * as Api from '@/api/user'
// import store from '@/store'
import { axios } from '@/utils/request'

// 充值类型枚举: 余额
const RECHARGE_TYPE_BALANCE = 'balance'

// 充值类型枚举: 积分
const RECHARGE_TYPE_POINTS = 'points'

export default {
  components: {
  },
  data () {
    return {
      // 对话框标题
      title: '账号审核',
      // 标签布局属性
      labelCol: { span: 7 },
      // 输入框布局属性
      wrapperCol: { span: 13 },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 当前表单元素
      form: this.$form.createForm(this),
      // 当前tab索引
      activeKey: RECHARGE_TYPE_BALANCE,
      // 充值类型
      RECHARGE_TYPE_BALANCE,
      RECHARGE_TYPE_POINTS,
      // 当前记录
      record: {},
      remark:'',
      is_check:0
    }
  },
  methods: {

    // 显示对话框
    handle (record) {
      console.log(222,record)
      // 显示窗口
      this.visible = true
      // 当前记录
      this.record = record
    },

    // 切换tabs事件
    onChangeTabs (activeKey) {
      this.activeKey = activeKey
    },

    /**
     * 确认按钮
     */
    handleSubmit (e) {
      e.preventDefault()
      // 表单验证
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
        // 提交到后端api
        !errors && this.onFormSubmit(values)
      })
    },

    /**
     * 关闭对话框事件
     */
    handleCancel () {
      this.visible = false
      this.form.resetFields()
    },

    /**
    * 提交到后端api
    */
    onFormSubmit (values) {
      let app = this;
      // const publicConfig = store.getters.publicConfig;
      
         
             axios.post('/user/audit_check', {  
                // 这里是你的POST数据  
                user_id: app.record.user_id, 
                gduser_id: app.record.gduser_id, 
                remark: values.remark, 
                is_check: values.is_check
              })  
              .then(result => {  
                // 请求成功  
                // console.log(response.data);  
                // 显示成功
                this.$message.success(result.message, 1.5)
                // 关闭对话框事件
                this.handleCancel()
                // 通知父端组件提交完成了
                this.$emit('handleSubmit', values)
              })  
              .catch(error => {  
                // 请求失败  
                console.error('There was an error!', error);  
              }); 
    }

  }
}
</script>
<style lang="less" scoped>
.ant-modal-body {
  padding-top: 0 !important;
}
.ant-form-item {
  margin-bottom: 15px;
}
.ant-tabs-nav .ant-tabs-tab {
  padding: 10px 16px;
}
</style>
